<!DOCTYPE html>
<html>
  <head>
    <title>游戏平台</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="logo">
        <img src="images/logo.png" alt="Logo">
        <span>开心网</span>
      </div>
      <div class="nav-menu">
        <div class="nav-item">游戏大厅</div>
        <div class="nav-item active">首页</div>
      </div>
      <div class="user-actions">
        <div class="user-action">注册</div>
        <div class "user-action">登录</div>
        <div class "user-action">帮助</div>
        <div class "user-action">更多</div>
      </div>
    </div>

    <div class="main-container">
      <div class="left-menu">
        <div class="menu-item">
          <img src="images/icon1.png" alt="Icon">
          <span>运动场所</span>
        </div>
        <div class="menu-item">
          <img src="images/icon2.png" alt="Icon">
          <span>定位</span>
        </div>
        <div class="menu-item active">
          <img src="images/icon3.png" alt="Icon">
          <span>游戏王</span>
        </div>
        <div class="menu-item">
          <img src="images/icon4.png" alt="Icon">
          <span>凡人修真2</span>
        </div>
        <div class="menu-item">
          <img src="images/icon5.png" alt="Icon">
          <span>一骑当千</span>
        </div>
        <div class="menu-item">
          <img src="images/icon6.png" alt="Icon">
          <span>爱情计算器</span>
        </div>
        <div class="menu-item">
          <img src="images/icon7.png" alt="Icon">
          <span>德州扑克</span>
        </div>
      </div>

      <div class="content">
        <div class="banner">
          <div class="banner-slide active">
            <img src="images/banner1.png" alt="Banner">
            <div class="banner-content">
              <div class="banner-title">寻找你的有缘人，共谱一段仙世缘</div>
              <div class="banner-desc">仙侠世界·真爱无界</div>
              <div class="banner-btn">GO</
                div>
            </div>
          </div>
          <div class="banner-slide">
            <img src="images/banner2.png" alt="Banner">
            <div class="banner-content">
              <div class="banner-title">热血江湖，再战沙场</div>
              <div class "banner-desc">武侠世界·热血无双</div>
              <div class "banner-btn">GO</div>
            </div>
          </div>
          <div class="banner-dots">
            <div class="banner-dot active"></div>
            <div class="banner-dot"></div>
            <div class="banner-dot"></div>
            <div class="banner-dot"></div>
            <div class="banner-dot"></div>
          </div>
        </div>

        <div class="game-tabs">
          <div class="game-tab active">全部游戏</div>
          <div class="game-tab">比赛项目</div>
          <div class="game-tab">休闲益智</div>
          <div class "game-tab">社交游戏</div>
        </div>

        <div class="game-list">
          <div class="game-item">
            <div class="game-image">
              <img src="images/game1.png" alt="Game">
            </div>
            <div class="game-info">
              <div class="game-title">三国志曹魏传RPG网游，丰富的武将系统</div>
              <div class="game-desc">类型：角色扮演</div>
              <div class="game-stats">游戏人气：470921</div>
              <div class="game-actions">
                <div class="game-btn detail">详情</div>
                <div class="game-btn play">进入游戏</div>
              </div>
            </div>
          </div>

          <div class="game-item">
            <div class="game-image">
              <img src="images/game2.png" alt="Game">
            </div>
            <div class="game-info">
              <div class="game-title">一款不错的三国类CD，不杀敌，杀性格</div>
              <div class="game-desc">类型：战略棋牌</div>
              <div class="game-stats">游戏人气：8745221</div>
              <div class="game-actions">
                <div class="game-btn detail">详情</div>
                <div class="game-btn play">进入游戏</div>
              </div>
            </div>
          </div>
        </div>

        <div class="role-play-section">
          <div class="section-title">角色扮演</div>
          <div class="role-play-games">
            <div class="role-game-item">
              <div class="role-game-image">
                <img src="images/role_game1.png" alt="Game">
              </div>
              <div class="role-game-info">
                <div class="role-game-stats">游戏人气：1765314</div>
                <div class="role-game-stats">游戏状态：226万在线</div>
                <div class="role-game-actions">
                  <div class="game-btn detail">详情</div>
                  <div class="game-btn play">进入游戏</div>
                </div>
              </div>
            </div>

            <div class="role-game-item">
              <div class="role-game-image">
                <img src="images/role_game2.png" alt="Game">
              </div>
              <div class="role-game-info">
                <div class="role-game-stats">游戏人气：1232158</div>
                <div class="role-game-stats">游戏状态：29万在线</div>
                <div class="role-game-actions">
                  <div class="game-btn detail">详情</div>
                  <div class="game-btn play">进入游戏</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="footer">
          <div class="footer-links">
            <a href="#" class="footer-link">关于我们</a>
            <a href="#" class="footer-link">开放平台</a>
            <a href="#" class="footer-link">自助广告</a>
            <a href="#" class="footer-link">客服</a>
            <a href="#" class="footer-link">招聘</a>
            <a href="#" class="footer-link">服务条款</a>
          </div>
          <p>©2017开心网 京ICP证080482号 京公网安备110000000003号 未成年人家长监护</p>
        </div>
      </div>
    </div>
  </body>
</html>